<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="添加收货地址"
    ></u-navbar>

    <view class="content">
      <view class="top">
        <view class="item">
          <view class="left">收货人</view>
          <input
            type="text"
            v-model="name"
            :disabled="type === 'detail'"
            placeholder-class="line"
            placeholder="请填写收货人姓名"
          />
        </view>
        <view class="item">
          <view class="left">联系电话</view>
          <input
            type="text"
            v-model="phone"
            :disabled="type === 'detail'"
            placeholder-class="line"
            placeholder="请填写收货人手机号"
          />
        </view>
        <view class="item" @click="showRegionPicker">
          <view class="left">所在地区</view>
          <input
            type="text"
            v-model="area"
            disabled
            placeholder-class="line"
            placeholder="请选择所在地区"
            @click="showRegionPicker"
          />
        </view>
        <view class="item">
          <view class="left">详细地址</view>
          <input
            type="text"
            v-model="address"
            :disabled="type === 'detail'"
            placeholder-class="line"
            placeholder="请填写详细的街道、楼牌号等"
          />
        </view>

        <!-- <view class="item">
          <view class="left">地址标签</view>
          <view class="right">
            <text class="tags jia">家</text>
            <text class="tags gs">公司</text>
            <text class="tags qt">其他</text>
          </view>
        </view> -->

        <view class="item">
          <view class="left"
            ><text>设置默认地址</text><text>下次下单会优先使用该地址</text></view
          >
          <view class="right">
            <u-checkbox-group @change="setDefault">
              <u-checkbox
                v-model="isDefault"
                shape="circle"
                active-color="#CC921F"
              ></u-checkbox>
            </u-checkbox-group>

            <!-- <u-switch
              v-model="isDefault"
              active-color="#CC921F"
              @change="setDefault"
            ></u-switch> -->
          </view>
        </view>
      </view>
    </view>
    <view v-if="type === 'add' || type === 'edit'" class="addAddress-bottom">
      <view class="sureBtn" @click="sure">提交</view>
    </view>

    <u-picker
      ref="uPicker"
      mode="multiSelector"
      v-model="show"
      :mask-close-able="false"
      :default-selector="defaultSelector"
      :range="range"
      range-key="name"
      @confirm="confirm"
      @columnchange="columnChange"
    ></u-picker>
  </view>
</template>

<script>
import service from '@/common/service.js';
import { showToast, throttle } from '@/common/utils';

export default {
  data() {
    return {
      show: false,
      type: 'detail',
      name: '',
      phone: '',
      area: '',
      areaCode: '',
      address: '',
      provinceId: null,
      province: '',
      cityId: null,
      city: '',
      regionId: null,
      regionId: '',
      isDefault: true,
      range: [[], []],
      defaultSelector: [0, 0],
      provinceData: [],
      cityData: [],
      regionData: [],
      addressId: null,
    };
  },
  onLoad(e) {
    if (e.type) {
      this.type = e.type;
    }

    if (e.id) {
      this.addressId = Number(e.id);
      this.getAddressData(e.id);
    }
    this.getProvinceData();
  },
  methods: {
    getProvinceData() {
      const that = this;
      service.getProvinceData(
        {},
        function (res) {
          if (res && res.data) {
            that.provinceData = res.data;
            that.range[0] = res.data;
            that.getCityData(res.data[0].id);
          }
        },
        function (res) {}
      );
    },
    getCityData(id) {
      const that = this;
      const params = {
        id: id,
      };
      service.getCityData(
        params,
        function (res) {
          if (res && res.data) {
            that.cityData = res.data;
            that.range[1] = res.data;
            that.getRegionData(res.data[0].id);
          }
        },
        function (res) {}
      );
    },
    getRegionData(id) {
      const that = this;
      const params = {
        id: id,
      };
      service.getRegionData(
        params,
        function (res) {
          if (res && res.data) {
            that.regionData = res.data;
            that.range[2] = res.data;
          }
        },
        function (res) {}
      );
    },
    confirm(e) {
      const provinceIndex = e[0];
      const cityIndex = e[1];
      const regionIndex = e[2];
      this.provinceId = this.provinceData[provinceIndex].id;
      this.province = this.provinceData[provinceIndex].name;
      this.cityId = this.cityData[cityIndex].id;
      this.city = this.cityData[cityIndex].name;
      this.regionId = this.regionData[regionIndex].id;
      this.region = this.regionData[regionIndex].name;
      this.area = `${this.province} ${this.city} ${this.region}`;
    },
    columnChange(e) {
      let column = e.column,
        index = e.index;
      if (column === 0) {
        const provinceId = this.provinceData[index].id;
        this.getCityData(provinceId);
      }
      if (column === 1) {
        const cityId = this.cityData[index].id;
        this.getRegionData(cityId);
      }
    },
    getAddressData(id) {
      const that = this;
      const params = {
        id: id,
      };
      service.getAddressData(
        params,
        function (res) {
          if (res && res.data) {
            const { data } = res;
            that.name = data.name;
            that.phone = data.phone;
            that.provinceId = data.provinceId;
            that.province = data.province;
            that.cityId = data.cityId;
            that.city = data.city;
            that.regionId = data.regionId;
            that.region = data.region;
            that.address = data.address;
            that.isDefault = data.isDefault;
            that.area = `${data.province} ${data.city} ${data.region}`;
          }
        },
        function (res) {}
      );
    },
    setDefault(value) {
      this.isDefault = value;
    },
    showRegionPicker() {
      if (this.type === 'detail') {
        return;
      }
      this.show = true;
    },
    sure: throttle(function () {
      const that = this;
      const params = {
        name: that.name,
        phone: that.phone,
        provinceId: that.provinceId,
        province: that.province,
        cityId: that.cityId,
        city: that.city,
        regionId: that.regionId,
        region: that.region,
        address: that.address,
        isDefault: that.isDefault,
      };
      if (this.addressId) {
        params.id = this.addressId;
        service.editAddress(
          params,
          function (res) {
            if (res && res.data) {
              showToast('提交成功，正在跳转');
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            } else {
              showToast('提交失败');
            }
          },
          function (res) {}
        );
      } else {
        service.addAddress(
          params,
          function (res) {
            if (res && res.data) {
              showToast('提交成功，正在跳转');
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            } else {
              showToast('提交失败');
            }
          },
          function (res) {}
        );
      }
    }, 1000),
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  text-align: center;
  padding: 30rpx;
  background-color: #f7f7f7;
  .content {
    border-radius: 10rpx;
    background-color: #fff;
  }
  .top {
    padding: 20rpx 26rpx;
    .item {
      display: flex;
      font-size: 28rpx;
      color: #333333;
      line-height: 100rpx;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        width: 180rpx;
        text-align: left;
        text:last-child {
          margin-left: 17rpx;
          color: #999999;
        }
      }
      .right {
        .tags {
          display: inline-block;
          margin-left: 20rpx;
          width: 86rpx;
          height: 30rpx;
          font-size: 22rpx;
          font-weight: 400;
          line-height: 30rpx;
          border-radius: 15rpx;
        }

        .jia {
          color: #ffffff;
          background-color: #ff4019;
        }

        .gs {
          color: #ff8c19;
          border: 1rpx solid #ff8c19;
          background-color: transparent;
        }

        .qt {
          color: #198cff;
          border: 1rpx solid #198cff;
          background-color: transparent;
        }
      }
      input {
        flex: 1;
        font-size: 26rpx;
        color: #222;
        text-align: right;
      }

      /deep/ .uni-input-placeholder {
        color: #999999;
      }
    }
  }
}

.addAddress-bottom {
  position: fixed;
  left: 0;
  bottom: 60rpx;
  width: 100%;
  padding: 0 30rpx;
  .sureBtn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 16rpx;
  }
}
</style>
